<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <link rel="stylesheet" href="assets/custombox.min.css" />
        <style>
            body{
                margin: 0;
            }
            .box{
                width: 600px;
                height: 400px;
            }
            .demo-modal {
                background-color: #FFF;
                box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(255, 14, 14, 1), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
                padding: 24px;
                width: 60%;
                position: relative;
                display: none;
            }
        </style>
    </head>
    <body>
        <h1>custombox的使用</h1>
        <p>来源:<a href="http://dixso.github.io/custombox/">http://dixso.github.io/custombox/</a></p>
        <button id="showModal">显示模态窗口</button>
        <section id="modal" class="box">
            <header>模态窗口头部</header>
            <div class="body">模态窗口主体</div>
            <footer>模态窗口底部</footer>
        </section>
        <div id="demo-modal" class="demo-modal">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script src="assets/custombox.min.js"></script>
        <script src="assets/custombox.legacy.min.js"></script>
        <script>
            // var modal=new Custombox.modal({
            //     content:{
            //         effect:'fadein',
            //         target:'#modal'
            //     }
            // });
            var modal=new Custombox.modal({
                content:{
                    effect:'slide',
                    target:'#demo-modal'
                }
            });
            $("#showModal").click(function(){
                modal.open();
            });
        </script>
    </body>
</html>